<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Input</title>
    <style>
        #customInput{
            width: 554px;
            height: 30px;
            border: 1px solid rgb(16, 137, 241);
            border-radius: 3px;
            text-indent: 40px;
            overflow: hidden;
        }

        .chat-bubble {
              background-color:#EDEDED;
              border:2px solid #666666;
              font-size:35px;
              line-height:1.3em;
              margin:10px auto;
              padding:10px;
              position:relative;
              text-align:center;
               width:300px;
               -moz-border-radius:10px;
               -webkit-border-radius:10px;
               -moz-box-shadow:0 0 5px #888888;
               -webkit-box-shadow:0 0 5px #888888;
             }
        .chat-bubble-arrow-border {
                 border-color: #666666 transparent transparent transparent;
                 border-style: solid;
                 border-width: 10px;
                 height:0;
                 width:0;
                 position:absolute;
                 bottom:-22px;
                 left:30px;
               }
        .chat-bubble-arrow {
                  border-color: #EDEDED transparent transparent transparent;
                  border-style: solid;
                  border-width: 10px;
                  height:0;
                  width:0;
                  position:absolute;
                  bottom:-19px;
                  left:30px;
                }
    </style>
</head>
<body>
    <input type="email" title="email" id="customInput"/>
    <a title="tiel tileiltil">title</a>
    <div class="chat-bubble">
      Buongiorno!
      <div class="chat-bubble-arrow-border"></div>
      <div class="chat-bubble-arrow"></div>
    </div>
</body>
</html>